<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>油卡管理管理</title>
	<meta name="decorator" content="ani"/>
	<style>
		#searchresult
		{
			width: 800px;
			position: absolute;
			z-index:1000;
			overflow: hidden;
			left: 140px;
			top: 71px;
			background: #E0E0E0;
			border-top: none;

		}

		.line
		{
			font-size: 15px;
			background: #E0E0E0;
			width: 800px;
			padding:0px;
		}
		.hover
		{
			background: #007ab8;
			width: 800px;
			color: #fff;
		}
		.std
		{
			width: 800px;
		}
	</style>
	<script type="text/javascript">
		var validateForm;
		var $table; // 父页面table表格id
		var $topIndex;//弹出窗口的 index
		function doSubmit(table, index){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
			  $table = table;
			  $topIndex = index;
			  jp.loading();
			  $("#inputForm").submit();
			  return true;
		  }

		  return false;
		}

		$(document).ready(function() {
			validateForm = $("#inputForm").validate({
				submitHandler: function(form){
					jp.post("${ctx}/ap/cardDetil/save",$('#inputForm').serialize(),function(data){
						if(data.success){
	                    	$table.bootstrapTable('refresh');
	                    	jp.success(data.msg);
	                    	jp.close($topIndex);//关闭dialog

	                    }else{
            	  			jp.error(data.msg);
	                    }
					})
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
            $('#date').datetimepicker({
                format: "YYYY-MM-DD HH:mm:ss"
            });
		});
        function dx1(val) {

            var dx=smalltoBIG(val.value);
            //$("#totalMoney").attr("title",reason);
            $("#money1").val(dx);
        }
        function smalltoBIG(n)
        {
            var fraction = ['角', '分'];
            var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
            var unit = [ ['元', '万', '亿'], ['', '拾', '佰', '仟']  ];
            var head = n < 0? '欠': '';
            n = Math.abs(n);

            var s = '';

            for (var i = 0; i < fraction.length; i++)
            {
                s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
            }
            s = s || '整';
            n = Math.floor(n);

            for (var i = 0; i < unit[0].length && n > 0; i++)
            {
                var p = '';
                for (var j = 0; j < unit[1].length && n > 0; j++)
                {
                    p = digit[n % 10] + unit[1][j] + p;
                    n = Math.floor(n / 10);
                }
                s = p.replace(/(零.)*零$/, '').replace(/^$/, '零')  + unit[0][i] + s;
            }
            return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
        }
        function se(evt) {

            ChangeCoords(); //控制查询结果div坐标

            var k = window.event ? evt.keyCode : evt.which;
            //输入框的id为txt_search，这里监听输入框的keyup事件
            //不为空 && 不为上箭头或下箭头或回车
            if ($("#ykbh").val() != ""  && k == 13) {
                $.ajax({
                    type: 'post',
                    async: true, //同步执行，不然会有问题
                    dataType: "json",
                    url: "${ctx}/ap/card/getCardByCode?code="+$("#ykbh").val(),   //提交的页面/方法
                    error: function (msg) {//请求失败处理函数
                        alert("数据加载失败");
                    },
                    success: function (data) { //请求成功后处理函数。
						/*  var objData = eval("(" + data.userName + ")");   */
                        console.log(data);
                        if (data.length > 0) {
                            var layer = "";
                            layer = "<table id='aa'>";
                            $.each(data, function (idx, item) {
                                layer += "<tr class='line' id='"+item.id+"'><td class='std'>" + item.number+ "</td></tr>";
                            });
                            layer += "</table>";

                            //将结果添加到div中
                            $("#searchresult").empty();
                            $("#searchresult").append(layer);
                            $(".line:first").addClass("hover");
                            $("#searchresult").css("display", "");
                            //鼠标移动事件

                            $(".line").hover(function () {
                                $(".line").removeClass("hover");
                                $(this).addClass("hover");
                            }, function () {
                                $(this).removeClass("hover");
                                //$("#searchresult").css("display", "none");
                            });
                            //鼠标点击事件
                            $(".line").click(function () {
                                $("#ykbh").val($(this).text());
                                tc($(this).attr("id"));
                                $("#searchresult").css("display", "none");
                            });
                        } else {
                            $("#searchresult").empty();
                            $("#searchresult").css("display", "none");
                        }
                    }
                });
            }
            else if (k == 38) {//上箭头
                $('#aa tr.hover').prev().addClass("hover");
                $('#aa tr.hover').next().removeClass("hover");
                $('#ykbh').val($('#aa tr.hover').text());
            }
            else if (k == 40) {//下箭头
                $('#aa tr.hover').next().addClass("hover");
                $('#aa tr.hover').prev().removeClass("hover");
                $('#ykbh').val($('#aa tr.hover').text());
            }

            else {
                $("#searchresult").empty();
                $("#searchresult").css("display", "none");
            }
        };
        $("#searchresult").bind("mouseleave", function () {
            $("#searchresult").empty();
            $("#searchresult").css("display", "none");
        });
        function ChangeCoords() {
            //    var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
            //    var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            var left = $("#ykbh").position().left; //获取距离最左端的距离，像素，整型
            var top = $("#ykbh").position().top + 32; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
            $("#searchresult").css("left", left + "px"); //重新定义CSS属性
            $("#searchresult").css("top", top + "px"); //同上
        }
        function tc(id) {
           var url='${ctx}/ap/card/det?i='+id
            $.ajax({
                url:url,
                success:function (data) {
                    $("#yklx").val(data.type);
                    $("#zkkh").val(data.code);
                    $("#zkhm").val(data.name);
                    $("#pwd").val(data.pwd);
                },
                error:function (data) {
                    alert("失败了");

                }
            })

        }
	</script>
</head>
<body class="bg-white">
		<form:form id="inputForm" modelAttribute="cardDetil" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>	
		<table class="table table-bordered">
		   <tbody>
				<tr>
					<td class="width-15 active"><label class="pull-right">项目：</label></td>
					<td class="width-35">
						<form:input path="pro" readonly="true" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">部门：</label></td>
					<td class="width-35">
						<form:input path="bm" readonly="true" htmlEscape="false"    class="form-control "/>
					</td>

				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">油卡编号：</label></td>
					<td class="width-35">
						<form:input path="ykbh" htmlEscape="false" onkeyup="se(event)" autocomplete="off"  class="form-control "/>
						<div id="searchresult" style="display: none;"></div>
					</td>
					<td class="width-15 active"><label class="pull-right">油卡类型：</label></td>
					<td class="width-35">
						<form:input path="yklx" htmlEscape="false" readonly="true"   class="form-control "/>
					</td>

				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">主卡卡号：</label></td>
					<td class="width-35">
						<form:input path="zkkh" htmlEscape="false" readonly="true"   class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">主卡户名：</label></td>
					<td class="width-35">
						<form:input path="zkhm" htmlEscape="false" readonly="true"   class="form-control "/>
					</td>

				</tr>
				<tr>

					<td class="width-15 active"><label class="pull-right">充值金额：</label></td>
					<td class="width-35">
						<form:input path="money" htmlEscape="false" onkeyup="dx1(this)"   class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">充值金额大写：</label></td>
					<td class="width-35">
						<input id="money1" htmlEscape="false" readonly="readonly"   class="form-control "/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">充值时间：</label></td>
					<td class="width-35">
						<div class='input-group form_datetime' id='date'>
							<input type='text'  name="date" class="form-control"  value="<fmt:formatDate value="${cardDetil.date}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
							<span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
						</div>
					</td>
					<td class="width-15 active"><label class="pull-right">密码：</label></td>
					<td class="width-35">
						<form:input path="pwd" htmlEscape="false"  readonly="true"  class="form-control "/>
					</td>

				</tr>
<tr>
	<td class="width-15 active"><label class="pull-right">经办人：</label></td>
	<td class="width-35">
		<form:input path="person" htmlEscape="false"    class="form-control "/>
	</td>
</tr>
		 	</tbody>
		</table>
	</form:form>
</body>
</html>